<template>
  <div class="video-upload-container">
    <h1>视频上传页面</h1>
    <form @submit.prevent="submitForm">
      <!-- 视频图片上传 -->
      <div>
        <label for="videoImg">视频封面图片:</label>
        <input type="file" id="videoImg" @change="handleImageUpload" accept="image/*" />
        <!-- 图片预览 -->
        <img v-if="video.previewImg" :src="video.previewImg" alt="视频封面" class="preview-image" />
      </div>

      <!-- 视频上传 -->
      <div>
        <label for="videoUrl">视频文件:</label>
        <input type="file" id="videoUrl" @change="handleVideoUpload" accept="video/*" />
        <!-- 视频预览 -->
        <video v-if="video.previewVideo" :src="video.previewVideo" controls class="preview-video"></video>
      </div>

      <!-- 原价 -->
      <div>
        <label for="oldPrice">原价:</label>
        <input type="number" id="oldPrice" v-model="video.oldPrice" />
      </div>

      <!-- 价格 -->
      <div>
        <label for="price">价格:</label>
        <input type="number" id="price" v-model="video.price" />
      </div>

      <!-- 视频名称 -->
      <div>
        <label for="videoName">视频名称:</label>
        <input type="text" id="videoName" v-model="video.videoName" />
      </div>

      <!-- 视频描述 -->
      <div>
        <label for="videoRemake">视频描述:</label>
        <textarea id="videoRemake" v-model="video.videoRemake"></textarea>
      </div>

      <!-- 状态 -->
      <div>
        <label for="status">状态:</label>
        <select id="status" v-model="video.status">
          <option value="1">激活</option>
          <option value="0">未激活</option>
        </select>
      </div>

      <!-- 提交按钮 -->
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      video: {
        videoImg: "",
        videoUrl: "",
        oldPrice: 0,
        price: 0,
        videoName: "",
        videoRemake: "",
        status: "active",
        previewImg: "",
        previewVideo: ""
      },
      form: {}
    };
  },
  methods: {
    handleImageUpload(event) {
      const file = event.target.files[0];
      const formData = new FormData();
      formData.append("video_img", file); // 假设后端期待的文件字段名是 'videoImg'
      console.log(file);
      console.log(formData);
      // 设置图片预览
      this.video.previewImg = URL.createObjectURL(file);

      this.$axios
        .post("/video/videoSave", formData, {
          headers: {
            "Content-Type": "multipart/form-data"
          }
        })
        .then(res => {
          console.log(res, 95); // 打印后端返回的数据
          // this.form.videoImg = res.replace("E:\\files\\", "");
          this.video.videoImg = res.replace("E:\\files\\", "");
          // console.log(this.video.previewImg);
        })
        .catch(error => {
          console.error("Error:", error);
          // 这里可以处理错误，例如显示错误消息
        });
    },

    handleVideoUpload(event) {
      const file = event.target.files[0];
      const formData = new FormData();
      formData.append("video_img", file); // 假设后端期待的文件字段名是 'videoUrl'
      // 设置视频预览
      this.video.previewVideo = URL.createObjectURL(file);

      this.$axios
        .post("/video/videoSave", formData, {
          headers: {
            "Content-Type": "multipart/form-data"
          }
        })
        .then(res => {
          console.log(res);
          this.video.videoUrl = res.replace("E:\\files\\", "");
        })
        .catch(error => {
          console.error("Error:", error);
          // 处理错误，例如显示错误消息
        });
    },
    submitForm() {
      this.form = { ...this.video };
      // this.form.videoImg = this.video.previewImg;
      // this.form.videoUrl = this.video.previewVideo;
      this.form.status = parseInt(this.form.status);
      console.log("提交的视频信息:", this.form);
      this.$axios
        .post("/video/addVideo", this.form)
        .then(response => {
          console.log(response);
          if (response.code == 200) {
            alert("视频上传成功！");
            // 清空页面的已经填写的数据
            this.video = {
              videoImg: null,
              videoUrl: null,
              oldPrice: 0,
              price: 0,
              videoName: "",
              videoRemake: "",
              status: "active",
              previewImg: "",
              previewVideo: ""
            };
          }
        })
        .catch(error => {
          console.error("Error:", error);
          // 处理错误，例如显示错误消息
          alert("上传失败，请重试！"); // 提示用户视频上传失败
        });
    }
  }
};
</script>

<style>
.video-upload-container {
  max-width: 600px;
  margin: auto;
  padding: 20px;
}

.video-upload-container label {
  display: block;
  margin-top: 10px;
}

.video-upload-container input,
.video-upload-container textarea,
.video-upload-container select {
  width: 100%;
  padding: 8px;
  margin-top: 5px;
}

.video-upload-container button {
  margin-top: 20px;
  padding: 10px 20px;
  cursor: pointer;
}
.preview-video {
  width: 100%; /* 视频宽度设置为容器的100% */
  max-width: 640px; /* 限制视频的最大宽度 */
  height: auto; /* 高度自动，保持视频的宽高比 */
}
</style>
